<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>二维码管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/slideshow' }"
        ><div class="el-breadcrumb-link">轮播图管理</div></el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- 卡片管理 -->
    <el-card style="height: 300px">
      <table class="uploadtable">
        <!-- 第一个上传框 -->
        <div class="upload-demo">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                  :on-remove="handleRemoveCode"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  methods: {
    handleRemove (file) {
      console.log(file)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      console.log(file)
    },
    // 移除二维码
    async handleRemoveCode (file) {
      // 截取file中url的的picId
      const pId = file.url.slice(28) - 0
      // 通过picId查询Id
      const { data: result } = await this.$http.get('QRCode/picId/' + pId)
      // 获取id
      const id = result.data.id
      // 根据id进行删除
      const { data: res } = await this.$http.delete('QRCode/' + id)
      // 判断是否删除成功
      if (res.meta.status !== 200) {
        // 删除二维码失败
        this.$message.error('二维码删除失败！')
      } else {
        // 删除二维码成功
        this.$message.success('二维码删除成功！')
      }
    }
  }
}
</script>
<style scoped>
.upload-demo {
  float: left;
}
.uploadtable {
  margin: 0px auto;
}
</style>
